<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex-shrink防止收缩</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .main {
      width: 600px;
      margin: 0 auto;
      border: 1px solid #000;
	    padding: 10px;
    }
    .flex-wrapper {
      display: flex;
      height: 300px;
      border: 2px solid #039145;
      padding: 10px;
	    margin: 10px 0;
    }
    .item {
	    height: 100%;
	    flex-basis: 50px;
	    background-color: #ccc;
	    border: 1px solid #000;
    }
    .form-content {
      display: flex;
	    justify-content: space-between;
    }
    .form-item {
	    flex-basis: 300px;
    }
    .form-item input {
	    width: 230px;
    }
    .item2 {
	    font-size: 20px;
	    font-weight: bold;
    }
  </style>
</head>
<body style="display: flex;">
  <div class="main">
    <h2>gap的应用</h2>
    <div class="flex-wrapper" id="box">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

    <form action="" class="form-content">
	    <div>
		    <h4>flex-direction</h4>
		    <label>
			    <input id="radio" type="radio" name="gaps" value="row" checked />row
		    </label>
		    <label>
			    <input id="radio1" type="radio" name="gaps" value="column" />column
		    </label>
	    </div>

      <div class="form-item">
	      <h4>gap</h4>
	      <label>
		      <input id="range" type="range" min="0" max="100" value="0" />
		      <span id="rangeValue">0px</span>
	      </label>
      </div>
    </form>
  </div>

  <div class="main">
	  <h2>导航应用gap实现菜单之间的间距</h2>
	  <div class="flex-wrapper" id="box2">
		  <div class="item2">首页</div>
		  <div class="item2">产品</div>
		  <div class="item2">关于我们</div>
	  </div>
	  <form action="" class="form-content">
		  <div>
			  <h4>justify-content</h4>
			  <label>
				  <input type="radio" name="gaps2" value="flex-start" checked />flex-start
			  </label>
			  <label>
				  <input type="radio" name="gaps2" value="center" />center
			  </label>
			  <label>
				  <input type="radio" name="gaps2" value="flex-end" />flex-end
			  </label>
		  </div>

		  <div class="form-item">
			  <h4>gap</h4>
			  <label>
				  <input id="range2" type="range" min="0" max="100" value="0" />
				  <span id="rangeValue2">0px</span>
			  </label>
		  </div>
	  </form>
  </div>

  <script>
    window.onload = function () {
			const box = document.getElementById('box');
			const radios = document.getElementsByName('gaps');
			const range = document.getElementById('range');
			const rangeValue = document.getElementById('rangeValue');

			radios.forEach(radio => {
				radio.onclick = function () {
					box.style.flexDirection = this.value;
				}
			});

			range.oninput = function () {
				box.style.gap = this.value + 'px';
				rangeValue.innerText = this.value + 'px';
			}

			const box2 = document.getElementById('box2');
			const radios2 = document.getElementsByName('gaps2');
			const range2 = document.getElementById('range2');
			const rangeValue2 = document.getElementById('rangeValue2');

			radios2.forEach(radio => {
				radio.addEventListener('change', function () {
					box2.style.justifyContent = this.value;
				})
			});
			range2.addEventListener('input', function () {
				box2.style.gap = this.value + 'px';
				rangeValue2.innerText = this.value + 'px';
			})
    }
  </script>
</body>
</html>
